<!DOCTYPE html>
<html>

<head>
    <title>stomp</title>
    <meta charset="utf-8">
</head>

<body>
    Welcome<br/><input id="text" type="text" />
    <button onclick="send()">发送消息</button>
	<button onclick="subscribe1()">订阅消息/topic/mubiao1</button>
    <button onclick="subscribe2()">订阅消息/topic/mubiao2</button>
	<button onclick="subscribe3()">订阅消息/topic/SubscribeMapping</button>
	<button onclick="subscribe4()">订阅消息-反馈/topic/feed</button>
	<button onclick="subscribe5()">订阅用户消息/user/queue/message</button>
    <button onclick="subscribe6()">订阅消息/topic+/user</button>
    <hr/>
	<button onclick="testFeedBroadcast()">广播消息测试（发给/topic/mubiao1）</button>
	<button onclick="testFeedUser()">推送消息给指定用户测试（发给/user/queue/message）</button>
    <button onclick="testToUser()">推送消息给指定用户测试（发给/message）</button>
    <hr/>
    <button onclick="testToAA()">推送消息给AA（发给/app/message）</button>
    <button onclick="testToBB()">推送消息给spittle（发给/app/spittle）</button>
    <hr/>
    <button onclick="closeWebSocket()">关闭WebSocket连接</button>
    <hr/>
    <div id="message"></div>
</body>

<script src="http://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
<script src="https://cdn.bootcss.com/sockjs-client/1.0.0/sockjs.min.js"></script>
<script type="text/javascript">
    // 建立连接对象（还未发起连接）
    var token = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX25hbWUiOiJhZG1pbiIsInNjb3BlIjpbIioiXSwibG9naW5OYW1lIjoiYWRtaW4iLCJleHAiOjE1NzkwNTYzNjYsImF1dGhvcml0aWVzIjpbIjEiLCI3Il0sImp0aSI6IjQ5ZmJiNDg0LTU1YjktNGFhYi1hYjAyLTFjOWIwNWRhYzMzOCIsImNsaWVudF9pZCI6Inl1a2UtY2xpZW50LXVhYyIsInRpbWVzdGFtcCI6MTU3OTA0OTE2Njk1Nn0.dfE28Nr5LwsrZ9i_Kgwr6KKTVh-H-Hl_skrDHHyvGb4";
    //var socket = new SockJS("http://192.168.3.64:8030/webSocketServer?token="+token);
    var socket = new SockJS("http://192.168.3.122:8030/webSocketServer?token="+token);
    // 获取 STOMP 子协议的客户端对象
    var stompClient = Stomp.over(socket);

    // 向服务器发起websocket连接并发送CONNECT帧
    stompClient.connect(
        {name:"271357058761228288"},
        function connectCallback(frame) {
            // 连接成功时（服务器响应 CONNECTED 帧）的回调方法
            setMessageInnerHTML("连接成功");
//             stompClient.subscribe('/topic/subscribeTest', function (response) {
//                 setMessageInnerHTML("已成功订阅/topic/subscribeTest");
//                 var returnData = JSON.parse(response.body);
//                 setMessageInnerHTML("/app/subscribeTest 你接收到的消息为:" + returnData.responseMessage);
            // });
        },
        function errorCallBack(error) {
            // 连接失败时（服务器响应 ERROR 帧）的回调方法
            setMessageInnerHTML("连接失败");
        }
    );
	
	//若使用STOMP 1.1 版本，默认开启了心跳检测机制（默认值都是10000ms）
	stompClient.heartbeat.outgoing = 20000;
	stompClient.heartbeat.incoming = 0; //客户端不从服务端接收心跳包

    function testToAA() {
        var message = document.getElementById('text').value;
        var messageJson = JSON.stringify({ "msg": message });
        stompClient.send("/app/queue", {}, messageJson);
        setMessageInnerHTML("/user/AA/message 你发送的消息:" + message);
    }

    function testToBB() {
        var message = document.getElementById('text').value;
        var messageJson = JSON.stringify({ "msg": message });
        stompClient.send("/app/spittle", {}, messageJson);
        setMessageInnerHTML("/user/token/message 你发送的消息:" + message);
    }

    function testToUser() {
        var message = document.getElementById('text').value;
        var messageJson = JSON.stringify({ "msg": message });
        stompClient.send("/app/startChat", {}, messageJson);
        setMessageInnerHTML("/user/1/startChat 你发送的消息:" + message);
    }
    //发送消息
    function send() {
        var message = document.getElementById('text').value;
        var messageJson = JSON.stringify({ "msg": message });
        //stompClient.send("/app/sendTest", {}, messageJson);
		//stompClient.send("/app/broadcastTest", {}, messageJson);
		//stompClient.send("/app/userTest", {}, messageJson);
		// stompClient.send("/app/room-message/111", {}, messageJson);
        stompClient.send("/app/boastMsg", {}, messageJson);
        setMessageInnerHTML("/app/boastMsg 你发送的消息:" + message);
    }

    //订阅消息
    function subscribe1() {
		setMessageInnerHTML("开始订阅/topic/mubiao1");
        stompClient.subscribe('/topic/mubiao1', function (response) {
            setMessageInnerHTML("已成功订阅/topic/mubiao1");
            var returnData = JSON.parse(response.body);
            setMessageInnerHTML("/topic/mubiao1 你接收到的消息为:" + returnData.responseMessage);
        });
    }

    //订阅消息
    function subscribe2() {
		setMessageInnerHTML("开始订阅/topic/mubiao2");
        stompClient.subscribe('/topic/mubiao2', function (response) {
            setMessageInnerHTML("已成功订阅/topic/mubiao2");
            var returnData = JSON.parse(response.body);
            setMessageInnerHTML("/topic/mubiao2 你接收到的消息为:" + returnData.responseMessage);
        });
    }
	
	function subscribe3() {
		setMessageInnerHTML("开始订阅/app/SubscribeMapping");
		stompClient.subscribe('/app/SubscribeMapping', function (response) {
			setMessageInnerHTML("已成功订阅/app/SubscribeMapping");
			var returnData = JSON.parse(response.body);
			alert(returnData.responseMessage);
			setMessageInnerHTML("/app/SubscribeMapping 你接收到的消息为:" + returnData.responseMessage);
		});
	}
	
	function subscribe4() {
		setMessageInnerHTML("开始订阅/topic/feed");
		stompClient.subscribe('/topic/feed', function (response) {
			setMessageInnerHTML("已成功订阅/topic/feed");
			var returnData = JSON.parse(response.body);
			setMessageInnerHTML("/topic/feed 你接收到的消息为:" + returnData.responseMessage);
		});
	}
	
    function subscribe5() {
		var userId = 'Elsa';
		setMessageInnerHTML("开始订阅/user/queue/message");
		var messageJson = JSON.stringify({ "msg": "test User" });
		//stompClient.send("/app/singleUserMsg", {}, messageJson);
		//stompClient.send("/app/userTest", {}, messageJson);
		
		//stompClient.subscribe('/user/' + userId + '/queue/message', function (response) {
    	stompClient.subscribe('/user/queue/message', function (response) {
    		var returnData = JSON.parse(response.body);
    		setMessageInnerHTML("/user/" + userId + "/queue/message 你接收到的消息为:" + returnData.responseMessage);
    	});
    }

    function subscribe6() {
        var userId = "1";
        setMessageInnerHTML("开始订阅/topic+/user");
        stompClient.subscribe('/topic/boastMsg', function (message) {
            var json = JSON.parse(message.body);
            setMessageInnerHTML("/topic/boastMsg  你接收到的消息为:" + json.toString());
        });

        stompClient.subscribe('/user/' + userId + '/queue/message', function (message) {
            var messageEntity = JSON.parse(message.body);
            setMessageInnerHTML("/user/" + userId + "/queue/message 你接收到的消息为:" + messageEntity.toString());
        });

        stompClient.subscribe('/user/queue/message', function (message) {
            var messageEntity = JSON.parse(message.body);
            setMessageInnerHTML("/user/queue/message 你接收到的消息为:" + messageEntity.toString());
        });

        stompClient.subscribe('/user/' + userId + '/message', function (message) {
            var messageEntity = JSON.parse(message.body);
            setMessageInnerHTML("/user/" + userId + "/message 你接收到的消息为:" + messageEntity.toString());
        });
    }



    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML) {
        document.getElementById('message').innerHTML += innerHTML + '<br/>';
    }
	
	function closeWebSocket() {
		setMessageInnerHTML("准备断开连接");
		if (stompClient != null) {
			stompClient.disconnect();
			setMessageInnerHTML("已经断开连接");
		} else {
			setMessageInnerHTML("断开连接失败");
		}
		
	}
	
	function testFeedBroadcast() {
		var url = "http://192.168.3.64:8030/webSocketServer/queue/feed"
        var request = new XMLHttpRequest();
        request.open("POST", url);
        request.send("111111111")
	}
	
	function testFeedUser() {
		var url = "http://192.168.3.64:8030/webSocketServer/queue/feedToUser"
        var request = new XMLHttpRequest();
        request.open("GET", url);
        request.send("22222222222")
	}
	

</script>

</html> 